<!-- 见证任务查看 -->
<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="行业类别">
          <el-cascader
            v-model="searchForm.industry"
            option-max-width="230px"
            class="ui-w230"
            :props="{ multiple: true }"
            collapse-tags
            :collapse-tags-max-num="1"
            :tooltip-max-width="230"
            tooltip-effect="light"
            :options="TASKOBJ.industryTypeAndIndustry"
            clearable
            @change="industryChange"
          />
        </el-form-item>
        <el-form-item label="交易方式">
          <el-select
            v-model="searchForm.tenderMode"
            class="ui-w160"
            option-max-width="160px"
            placeholder="请选择"
            clearable
            @change="handleSearch()"
          >
            <el-option v-for="(value, key) in tenderModeOptionsObj" :key="key" :label="value" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="资审方式">
          <el-select
            v-model="searchForm.zsType"
            class="ui-w160"
            option-max-width="160px"
            placeholder="请选择"
            clearable
            @change="handleSearch()"
          >
            <el-option
              v-for="item in TASKOBJ.qualificationExamMethods"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="见证状态">
          <el-select
            v-model="searchForm.witnessStatus"
            class="ui-w130"
            option-max-width="130px"
            placeholder="请选择"
            clearable
            @change="handleSearch()"
          >
            <el-option v-for="item in witnessStatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="开标时间">
          <el-date-picker
            v-model="searchForm.date"
            class="ui-w260"
            unlink-panels
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="true"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="handleSearch()"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchForm.keywords"
            class="ui-w210"
            placeholder="项目/标段/名称/编号"
            @keyup.native.enter="handleSearch()"
          >
            <el-button slot="append" type="primary" icon="icon-sousuo" @click="handleSearch()" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <div class="layout-left">
        <el-button type="primary" icon="icon-xinzengsvg1" plain @click="handleAddTaskFn()">新增见证任务</el-button>
      </div>
      <div class="layout-right status-list">
        <span class="completed">已完成</span>
        <span class="inWitness">见证中</span>
        <span class="pause">暂停见证</span>
        <span class="pending">待定中</span>
        <span class="notStarted">未开始</span>
      </div>
    </div>
    <div class="layout-body">
      <el-table v-loading="tableLoading" :data="tableList" style="width: 100%" height="100%" isdrag :no-hover="true">
        <el-table-column type="expand" width="30">
          <template slot-scope="scope">
            <el-table
              :data="scope.row.bidList"
              border
              style="width: 100%"
              row-class-name="in-Table"
              header-row-class-name="in-Table-header"
              cell-class-name="in-Table-cell"
              :no-hover="true"
            >
              <el-table-column prop="bidSectionName" label="标段名称" min-width="223" show-overflow-tooltip />
              <el-table-column prop="bidSectionCode" label="标段编号" min-width="182" show-overflow-tooltip />
              <el-table-column prop="openStartTime" label="开标时间" min-width="148" show-overflow-tooltip>
                <template slot-scope="bidScope">
                  {{ formatDateFn(bidScope.row.openStartTime, "yyyy-MM-dd HH:mm") }}
                </template>
              </el-table-column>
              <el-table-column prop="openAddress" label="开标室" min-width="110" show-overflow-tooltip />
              <el-table-column prop="evaluationAddress" label="评标室" min-width="110" show-overflow-tooltip />
              <el-table-column label="见证进度" min-width="600">
                <template slot-scope="bidScope">
                  <!-- {{ bidScope.row.witnessSubTaskVOList }} -->
                  <div class="scrollbar" style="max-width: 600px; overflow: auto; padding-bottom: 8px">
                    <!-- average -->
                    <el-steps simple class="progress-list" process-status="process">
                      <el-step
                        v-for="item in bidScope.row.witnessSubTaskVOList"
                        :key="item.witnessSubTaskId"
                        :class="getProgressClass(item.witnessSubTaskStatusEnum)"
                        @click.native="handleWitnessSubTaskClick(scope.row, bidScope.row, item)"
                      >
                        <template v-slot:title>
                          <!-- {{ item.witnessSubTaskStatusEnum }} -->
                          <el-tooltip
                            v-if="item.witnessSubTaskStatusEnum !== 'WITNESS_PENDING'"
                            effect="dark"
                            :disabled="!item.witnessUserName"
                            :content="'见证人：' + item.witnessUserName"
                            placement="top-start"
                          >
                            <div class=" " style="min-width: 34px">
                              {{ item.witnessSubTaskName.replace(/标$/, "") }}
                              <i v-if="item.isException" class="el-icon-warning" />
                            </div>
                          </el-tooltip>
                          <div v-else class=" " style="min-width: 34px">
                            {{ item.witnessSubTaskName.replace(/标$/, "") }}
                            <i v-if="item.isException" class="el-icon-warning" />
                          </div>
                        </template>
                      </el-step>
                    </el-steps>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="操作" min-width="150">
                <template slot-scope="bidScope">
                  <el-button
                    v-if="bidScope.row.OPERATE_VIEW_WITNESS_DATA"
                    type="text"
                    @click="handleViewWitnessData(scope.row, bidScope.row)"
                  >
                    查看见证资料
                  </el-button>
                  <el-button
                    v-if="bidScope.row.OPERATE_VIEW_WITNESS_ATTACHMENT"
                    type="text"
                    @click="handleClickAttachment(bidScope.row, scope)"
                  >
                    附件
                  </el-button>
                  <!--  -->
                  <el-button
                    v-if="bidScope.row.OPERATE_VIEW_WITNESS_VIDEO"
                    type="text"
                    @click="openMediaFn(bidScope.row, scope)"
                  >
                    查看视频
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="53" align="center">
          <template slot-scope="scope">
            {{ (pageObj.currentPage - 1) * pageObj.pageSize + scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="projectName" label="项目名称" min-width="223" show-overflow-tooltip />
        <el-table-column prop="projectCode" label="项目编号" min-width="167" show-overflow-tooltip />
        <el-table-column
          prop="industry"
          label="行业类别"
          min-width="158"
          :formatter="formatterIndustry"
          show-overflow-tooltip
        />
        <el-table-column
          prop="tenderMode"
          label="交易方式"
          min-width="158"
          :formatter="formatterTenderMode"
          show-overflow-tooltip
        />
        <el-table-column
          prop="qualificationExamMethod"
          label="资审方式"
          min-width="159"
          :formatter="formatterQualificationExamMethod"
          show-overflow-tooltip
        />
        <el-table-column prop="businessUnit" label="业务部门" min-width="159" show-overflow-tooltip />
        <el-table-column prop="operateUserName" label="经办人" min-width="159" show-overflow-tooltip />
        <el-table-column label="操作" min-width="160">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.OPERATE_PROJECT_DETAIL"
              type="text"
              @click="handleViewDetailFn(scope.row.projectId)"
            >
              项目详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="layout-footer">
      <pagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :page-sizes="pageObj.pageSizes"
        @pagination="viewListFn()"
      />
    </div>
    <!-- 项目详情弹窗 -->
    <ProjectDetailsDrawer
      :visible.sync="detailDialogShow"
      @closeDrawer="closeDrawerFn"
      :project-id="currentProjectId"
      :task-obj="TASKOBJ"
    />
  </div>
</template>
<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  import { moduleInit, viewList, witnessProjectBidSectionDetail } from "../../../../api/api";
  import { FindArrayFn as findArrayFn, getFirstAndSecondLevel, formatDateFn, isOneH } from "../../../../utils/utils";
  import ProjectDetailsDrawer from "../../../../components/dialog/ProjectDetailsDrawer.vue";
  export default {
    // 引入组件
    components: { ProjectDetailsDrawer },
    props: {},
    data() {
      // 这里存放数据
      return {
        searchForm: {
          industry: [],
          industrySecondLevel: [], // 选中的行业类别的二级菜单的数组集合
          tenderMode: "",
          zsType: "",
          witnessStatus: "",
          date: [],
          keywords: ""
        },
        TASKOBJ: {}, // 后端返回的所有下拉映射值数据
        tenderModeIndustryObj: {}, // 依据行业类别一级菜单分组显示的交易方式
        tenderModeOptionsObj: {}, // 交易方式下拉
        witnessStatusOptions: [
          // {
          //   value: "WITNESS_FINISHED",
          //   label: "已完成"
          // }, // 已完成 = 待审核(WITNESS_UN_REVIEWED)和已见证(WITNESS_FINISHED)，利用已见证的code查询，其实返回的同时包含已见证和待审核
          // {
          //   value: "WITNESSING",
          //   label: "见证中"
          // }, // 见证中 = 见证中(WITNESSING)
          // {
          //   value: "PAUSE",
          //   label: "暂停见证"
          // },
          // {
          //   value: "ASSIGNED",
          //   label: "未开始"
          // } // 未开始 = 已分配(ASSIGNED)
        ], // 见证状态下拉
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
        },
        tableList: [],
        tableLoading: true,
        pathUrl: true,
        pageObj: {
          total: 0,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        detailDialogShow: false, // 是否展示项目详情弹窗
        currentProjectId: "" // 当前操作的项目id
      };
    },
    // 监听属性 类似于data概念
    computed: {
      wsData() {
        // return this.$websocket.getters.wsData;
        return this.$websocketNetty.getters.wsData;
      }
    },
    // 监控data中的数据变化
    watch: {
      wsData(val) {
        console.log("watch wsData", val);
        if (val) {
          this.witnessProjectBidSectionDetailFn(val);
        }
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.searchForm.date = [
        this.$moment(new Date()).format("yyyy-MM-DD"),
        this.$moment(new Date()).format("yyyy-MM-DD")
      ];
      const arr = ["ViewingWitnessRecords", "AddWitnessTask", "WitnessRecordApprove"];
      if (arr.indexOf(this.pathUrl) > -1 || this.pathUrl === null) {
        this.searchForm = JSON.parse(sessionStorage.getItem("searchFormTask1"));
        this.pageObj.currentPage = Number(sessionStorage.getItem("currentPageTask1"));
        this.pageObj.pageSize = Number(sessionStorage.getItem("pageSizeTask1"));
      }
      this.pageInitFn();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {
      console.log("activated");
      const arr = [
        "ViewingWitnessRecords",
        "AddWitnessTask",
        "WitnessRecordApprove",
        "Attachment",
        "ViewingWitnessData"
      ];
      if (arr.indexOf(this.pathUrl) > -1 || this.pathUrl === null) {
        this.searchForm = JSON.parse(sessionStorage.getItem("searchFormTask1"));
        this.pageObj.currentPage = Number(sessionStorage.getItem("currentPageTask1"));
        this.pageObj.pageSize = Number(sessionStorage.getItem("pageSizeTask1"));
      }
      console.log("this.searchForm", this.searchForm);
      if (this.searchForm.date && this.searchForm.date.length === 0) {
        this.searchForm.date = [
          this.$moment(new Date()).format("yyyy-MM-DD"),
          this.$moment(new Date()).format("yyyy-MM-DD")
        ];
      }
      // this.handleSearch
      // 列表重新渲染
      this.viewListFn();
      // this.pageInitFn();
    },
    beforeRouteLeave(to, from, next) {
      // to.meta.keepAlive = true;
      next();
    },
    beforeRouteEnter(to, from, next) {
      next((vm) => {
        console.log(to);
        console.log(from);
        // vm.pathUrl = from.fullPath;
        vm.pathUrl = from.name;
      });
    },
    // 方法集合
    methods: {
      ...{ formatDateFn },
      pageInitFn() {
        clearTimeout(this.timeFlag);
        this.timeFlag = setTimeout(() => {
          this.moduleInitFn();
        }, 300);
      },
      async moduleInitFn() {
        console.log("this.pathUrl", this.pathUrl);
        console.log("this.pageObj", this.pageobj);
        try {
          const res = await moduleInit({ moduleName: "TASK" });
          if (res.success) {
            this.TASKOBJ = res.data;
            this.witnessStatusOptions = res.data.witnessStatusManager;
            // 依据行业类别的一级分类分组显示交易方式
            for (let i = 0; i < res.data.industryTypeAndTenderMode.length; i++) {
              const obj = res.data.industryTypeAndTenderMode[i];
              this.tenderModeIndustryObj[obj.value] = obj.children;
            }
            this.industryChange([]); // 获取交易方式的下拉及获取列表数据
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.error(error);
          this.tableLoading = false;
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      },
      // 行业类别发生变化，交易方式下拉选项联动
      industryChange(arr) {
        const obj = getFirstAndSecondLevel(arr);
        this.searchForm.industrySecondLevel = obj.secondLevel;
        this.tenderModeOptionsObj = {};
        if (obj.firstLevel.length === 0) {
          // 1. 当行业类型没有值时，交易方式默认返回所有的下拉值
          for (const key in this.tenderModeIndustryObj) {
            this.tenderModeOptionsObj = this.getTenderModeOptions(
              this.tenderModeOptionsObj,
              this.tenderModeIndustryObj[key]
            );
          }
        } else {
          // 2. 有值时，依据一级行业的一级菜单获取交易方式的下拉
          for (let i = 0; i < obj.firstLevel.length; i++) {
            this.tenderModeOptionsObj = this.getTenderModeOptions(
              this.tenderModeOptionsObj,
              this.tenderModeIndustryObj[obj.firstLevel[i]]
            );
          }
        }
        if (this.$route.query.urlName === "WITNESS_TASK_VIEW") {
          this.viewListFn();
          this.$route.query.urlName = "";
        } else {
          this.handleSearch();
        }
      },
      getTenderModeOptions(obj, arr) {
        for (let i = 0; i < arr.length; i++) {
          // eslint-disable-next-line no-prototype-builtins
          if (!obj.hasOwnProperty(arr[i].value)) {
            obj[arr[i].value] = arr[i].label;
          }
        }
        return obj;
      },
      // 搜索查询
      handleSearch() {
        this.pageObj.total = 0;
        this.pageObj.currentPage = 1;
        // sessionStorage.setItem("witnessTaskView", JSON.stringify(this.searchForm));
        this.viewListFn();
      },
      // 见证任务列表数据
      viewListFn() {
        clearTimeout(this.apiflag);
        this.apiflag = setTimeout(() => {
          this.viewListFn2();
        }, 500);
      },
      async viewListFn2() {
        const date = new Date();
        const form = JSON.stringify(this.searchForm);
        console.log("form1111", form);
        sessionStorage.setItem("searchFormTask1", form);
        sessionStorage.setItem("currentPageTask1", this.pageObj.currentPage);
        sessionStorage.setItem("pageSizeTask1", this.pageObj.pageSize);
        try {
          this.tableLoading = true;
          this.tableList = [];
          const params = {
            industryList: this.searchForm.industrySecondLevel,
            tenderMode: this.searchForm.tenderMode,
            qualificationExamMethod: this.searchForm.zsType,
            witnessSubTaskStatusEnum: this.searchForm.witnessStatus,
            search: this.searchForm.keywords,
            currentPage: this.pageObj.currentPage,
            pageSize: this.pageObj.pageSize
          };
          if (this.searchForm.date && this.searchForm.date.length) {
            params.startTime = `${this.searchForm.date[0]} 00:00:00`;
            params.endTime = `${this.searchForm.date[1]} 23:59:59`;
          }
          console.log(this.pageObj.currentPage, "======");
          const res = await viewList(params);
          this.tableLoading = false;
          if (res.success) {
            this.tableList = [];
            res.data.result.forEach((proItem) => {
              const proObj = proItem.data;
              proItem.pageOpers.forEach((val) => {
                proObj[val.code] = true;
              });
              proObj.bidList = [];
              proObj.bidSectionVOList.result.forEach((bidItem) => {
                const bidObj = bidItem.data;
                bidItem.pageOpers.forEach((val) => {
                  bidObj[val.code] = true;
                });
                if(!isOneH(bidObj.evaluationStartTime, date)){
                  bidObj.evaluationAddress = '**'
                }
                proObj.bidList.push(bidObj);
              });
              this.$delete(proObj, "bidSectionVOList");
              this.tableList.push(proObj);
            });
            this.pageObj.total = res.data.pageBean.count;
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.error(error);
          this.tableLoading = false;
          this.$message({
            type: "error",
            message: "获取数据失败，请稍后再试",
            single: true
          });
        }
      },
      formatterIndustry(row) {
        let str = "";
        if (row.industryType) {
          const obj = findArrayFn(this.TASKOBJ.industryTypeAndIndustry, row.industryType);
          str = obj.label;
        }
        if (row.industry) {
          const inObj = findArrayFn(this.TASKOBJ.industryTypeAndIndustry, row.industry);
          str = `${str}/${inObj.label}`;
        }
        return str;
      },
      formatterTenderMode(row) {
        let str = "";
        if (row.tenderMode) {
          str = this.tenderModeOptionsObj[row.tenderMode];
        }
        return str;
      },
      formatterQualificationExamMethod(row) {
        let str = "";
        if (row.qualificationExamMethod) {
          const obj = findArrayFn(this.TASKOBJ.qualificationExamMethods, row.qualificationExamMethod);
          str = obj.label;
        }
        return str;
      },
      closeDrawerFn() {
        console.log("closeDrawerFn");
        this.currentProjectId = "";
        this.detailDialogShow = false;
      },
      // 项目详情
      handleViewDetailFn(projectId) {
        this.currentProjectId = projectId;
        this.detailDialogShow = true;
      },
      // 获取见证进度各个步骤的class样式
      getProgressClass(status) {
        /* 显示状态和后端实际状态的对应关系如下：
          已完成 = 待审核(WITNESS_UN_REVIEWED)和已见证(WITNESS_FINISHED)
          见证中 = 见证中(WITNESSING)
          未开始 = 已分配(ASSIGNED)
          未开始 = 待定中(WITNESS_PENDING)
      */
        if (status === "WITNESS_UN_REVIEWED" || status === "WITNESS_FINISHED") {
          return "status-completed";
        } else if (status === "WITNESSING") {
          return "status-inWitness";
        } else if (status === "WITNESS_STOP") {
          return "status-pause";
        } else if (status === "ASSIGNED") {
          return "status-notStarted";
        } else if (status === "WITNESS_PENDING") {
          return "status-pending";
        }
      },
      // 点击标段的某个见证阶段，proRow：项目数据，bidRow：标段数据，item：点击的见证阶段数据
      handleWitnessSubTaskClick(proRow, bidRow, item) {
        if (
          item.witnessSubTaskStatusEnum === "WITNESS_UN_REVIEWED" ||
          item.witnessSubTaskStatusEnum === "WITNESS_FINISHED"
        ) {
          // 已完成
          console.log("item.witnessSubTaskName", item.witnessSubTaskName);
          this.$router.push({
            name: "ViewingWitnessRecords",
            query: {
              projectId: proRow.projectId,
              bidSectionId: bidRow.bidSectionId,
              witnessLinkCode: item.witnessLinkCode,
              witnessSubTaskName: item.witnessSubTaskName,
              witnessSubTaskId: item.witnessSubTaskId,
              witnessSubTaskStatusEnum: item.witnessSubTaskStatusEnum,
              urlName: "WitnessTaskView"
            }
          });
        } else if (item.witnessSubTaskStatusEnum === "WITNESSING" || item.witnessSubTaskStatusEnum === "WITNESS_STOP") {
          // 见证中
          this.$router.push({
            name: "WitnessTable",
            query: {
              type: item.witnessLinkCode,
              id: item.witnessSubTaskId
            }
          });
        }
      },
      // 查看见证资料
      handleViewWitnessData(row, bidrow) {
        this.$router.push({
          name: "ViewingWitnessData-gly",
          query: {
            projectName: row.projectName,
            witnessTaskId: bidrow.witnessTaskId,
            bidSectionName: bidrow.bidSectionName
          }
        });
      },
      openMediaFn(row, scope) {
        console.log("row", row);
        console.log("scope", scope);
        const list = row.witnessSubTaskVOList.find((item) => {
          console.log("item", item);
          console.log(item.witnessSubTaskStatusEnum === "WITNESS_FINISHED");
          console.log("item.witnessLinkCode", item.witnessLinkCode);
          return (
            (item.witnessSubTaskStatusEnum === "WITNESS_FINISHED" ||
              item.witnessSubTaskStatusEnum === "WITNESS_UN_REVIEWED") &&
            ["ZS", "KB", "QB", "PB", "FP"].indexOf(item.witnessLinkCode) > -1
          );
        });
        console.log("list", list);
        // 管理员，查看视频
        const { witnessSubTaskId } = list;
        // let videoCreateTime = row.openStartTime.split(" ")[0];
        // let startTime = new Date(videoCreateTime + " 00:00:00").getTime();
        // let endTime = new Date(videoCreateTime + " 23:59:59").getTime();
        let str = new Date().getTime();
        str += `&witnessSubTaskId=${witnessSubTaskId}`;
        str += "&type=over";
        // str += `&startTime=${startTime}&endTime=${endTime}`;
        console.log("flag", str);
        window.open(`${process.env.VUE_APP_MEDIA}${str}`, "witness_media");
      },
      // 查看附件
      handleClickAttachment(row, scope) {
        console.log("row", row);
        console.log("scope", scope);
        this.$router.push({
          path: "/WitnessTaskManagement/Attachment",
          query: {
            witnessTaskId: row.witnessTaskId,
            from: "witnessTaskView",
            projectName: scope.row.projectName,
            bidSectionName: row.bidSectionName
          }
        });
      },
      // 新增见证任务
      handleAddTaskFn() {
        this.$router.push({ path: "/WitnessTaskManagement/AddWitnessTask" });
      },
      // 见证详细
      async witnessProjectBidSectionDetailFn(data) {
        // this.tableLoading = true;
        // this.tableData = [];
        console.log("data1111111111", data);
        if (!data || !data.projectId) {
          return;
        }
        const p = {
          projectId: data.projectId,
          bidSectionIdList: data.bidSectionIdList
        };
        console.log("p", p);
        try {
          const res = await witnessProjectBidSectionDetail(p);
          console.log("res", res);
          if (res.success) {
            // let i, j;
            this.tableList.forEach((item) => {
              if (item.projectId === data.projectId) {
                // i = index;
                // 项目名称 , 项目编号,行业类别,交易方式,资审方式
                console.log("item", item);
                // .bidSectionInfoList,witnessProjectBaseInfo
                // item.projectName = res.data;
                const project = res.data.witnessProjectBaseInfo;
                const { bidSectionInfoList } = res.data;
                item.projectName = project.projectName;
                item.projectCode = project.projectCode;
                item.industry = project.industry;
                item.industryType = project.industryType;
                item.tenderMode = project.tenderMode; // 交易方式
                item.businessUnit = project.businessUnit;
                item.operateUserName = project.operateUserName;
                // item.sourceSystemCode = project.sourceSystemCode;
                // item.sourceSystemName = project.sourceSystemName;
                item.qualificationExamMethod = project.qualificationExamMethod; // 资审方式
                bidSectionInfoList.forEach((itemC) => {
                  // table的数据
                  item.bidList.forEach((itemB) => {
                    const flag = itemC.bidSectionCode === itemB.bidSectionCode;
                    if (flag) {
                      itemB.evaluationAddress = itemC.evaluationAddress;
                      itemB.openAddress = itemC.openAddress;
                      itemB.openStartTime = itemC.openStartTime;
                      itemB.bidSectionName = itemC.bidSectionName;
                      itemB.bidSectionCode = itemC.bidSectionCode;
                      // itemB.witnessAllocateUserName =
                      itemB.witnessSubTaskVOList = itemC.witnessSubTaskVOList;
                    }
                  });
                });
              }
            });
            this.tableData;
            // this.$set(this.tableData, i, Obj);
          } else {
            this.$message({
              type: "error",
              message: res.message || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.warn(error);
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  $completed: #56b502 !default;
  $pause: #8280ff !default;
  $pending: #d5a90a !default;
  $inWitness: #1890ff !default;
  $notStarted: #b2b2b2 !default;
  .status-list {
    padding-top: 18px;
    span {
      padding-left: 20px;
      font-size: 12px;
      &::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -2px;
      }
    }
    .completed::before {
      background-color: $completed;
    }
    .pause::before {
      background-color: $pause;
    }
    .pending::before {
      background-color: $pending;
    }
    .inWitness::before {
      background-color: $inWitness;
    }
    .notStarted::before {
      background-color: $notStarted;
    }
  }
  ::v-deep.progress-list {
    .el-step {
      height: 26px;
      line-height: 26px;
      &::before {
        border-width: 13px;
      }
      &::after {
        border-width: 13px;
        right: -26px;
      }
      .cell {
        padding: 0 6px;
      }
      .el-step__title {
        line-height: 26px;
        text-align: center;
        i {
          color: #fc9306;
          // background-color: #fff;
        }
      }
    }
    // 已完成状态
    .status-completed {
      cursor: pointer;
    }
    // 见证中状态
    .status-inWitness {
      cursor: pointer;
    }
    // 见证中状态
    .status-pause {
      cursor: pointer;
    }
    // 未开始状态
    .status-notStarted {
      background: rgba(153, 153, 153, 0.2);
      &::after {
        border-left-color: rgba(153, 153, 153, 0.2);
      }
    }
    // 待定中状态
    //(notStarted, $notStarted)
    @each $itemName, $color in (pending, $pending), (pause, $pause), (completed, $completed), (inWitness, $inWitness) {
      .status-#{"" + $itemName} {
        // cursor: pointer;
        background: rgba($color, 0.2);
        &::after {
          border-left-color: rgba($color, 0.2);
        }
        .el-step__title {
          color: $color;
        }
      }
      @if $itemName != pending {
        .status-#{"" + $itemName}:hover {
          background: rgba($color, 1);
          &::after {
            border-left-color: rgba($color, 1);
          }
          .el-step__title {
            color: #fff;
          }
        }
      }
    }
  }
  // @function statusFn(){
  //   @return
  // }
</style>
